<template>
    <div style="min-width: 829px">
        <div v-if="$route.path == '/demandList'">
            <div class="vs-search-box">
                <el-tabs v-model="active" v-search-box-enter @tab-click="handleClick">
                    <el-tab-pane label="特殊商品" name="0">
                        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                            <el-form-item label="订单状态：">
                                <el-select style="width: 200px" clearable v-model="paging.status" placeholder="请选择">
                                    <el-option label="已下单" value="-1"> </el-option>
                                    <el-option label="待入库" value="1"> </el-option>
                                    <el-option label="部分入库" value="2"> </el-option>
                                    <el-option label="已入库" value="3"> </el-option>
                                    <!-- <el-option label="已完成" value="4"> </el-option> -->
                                    <el-option label="售后中" value="5"> </el-option>
                                    <el-option label="取消审核" value="6"> </el-option>
                                    <el-option label="已取消" value="7"> </el-option>
                                    <el-option label="已作废" value="8"> </el-option>
                                    <el-option label="已完成" value="9"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="商品类型：">
                                <el-select style="width: 200px" clearable v-model="paging.type" placeholder="请选择">
                                    <el-option label="定制毛坯" value="1"> </el-option>
                                    <el-option label="定制成品" value="2"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="申请时间：">
                                <el-date-picker v-model="paging.date" type="datetimerange" format="yyyy-MM-dd HH:mm"
                                    value-format="yyyy-MM-dd HH:mm" start-placeholder="开始时间" end-placeholder="结束时间"
                                    style="width: 260px"> </el-date-picker>
                            </el-form-item>
                            <el-form-item label="" class="vs-right-btns">
                                <el-button @click="reset">重置</el-button>
                                <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="标准毛坯" name="1">
                        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                            <el-form-item label="订单状态：">
                                <el-select style="width: 200px" clearable v-model="paging.status" placeholder="请选择">
                                    <el-option label="已下单" value="-1"> </el-option>
                                    <el-option label="待入库" value="1"> </el-option>
                                    <el-option label="部分入库" value="2"> </el-option>
                                    <el-option label="已入库" value="3"> </el-option>
                                    <!-- <el-option label="已完成" value="4"> </el-option> -->
                                    <el-option label="售后中" value="5"> </el-option>
                                    <el-option label="取消审核" value="6"> </el-option>
                                    <el-option label="已取消" value="7"> </el-option>
                                    <el-option label="已作废" value="8"> </el-option>
                                    <el-option label="已完成" value="9"> </el-option>
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item label="商品类型：">
                                <el-select style="width: 200px" clearable v-model="paging.type" placeholder="请选择">
                                    <el-option label="标准毛坯" value="1"> </el-option>
                                    <el-option label="标准成品" value="2"> </el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="申请时间：">
                                <el-date-picker v-model="paging.date" type="datetimerange" format="yyyy-MM-dd HH:mm"
                                    value-format="yyyy-MM-dd HH:mm" start-placeholder="开始时间" end-placeholder="结束时间"
                                    style="width: 260px"> </el-date-picker>
                            </el-form-item>
                            <el-form-item label="" class="vs-right-btns">
                                <el-button @click="reset">重置</el-button>
                                <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="标准成品" name="4">
                        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                            <el-form-item label="订单状态：">
                                <el-select style="width: 200px" clearable v-model="paging.status" placeholder="请选择">
                                    <el-option label="已下单" value="-1"> </el-option>
                                    <el-option label="待入库" value="1"> </el-option>
                                    <el-option label="部分入库" value="2"> </el-option>
                                    <el-option label="已入库" value="3"> </el-option>
                                    <!-- <el-option label="已完成" value="4"> </el-option> -->
                                    <el-option label="售后中" value="5"> </el-option>
                                    <el-option label="取消审核" value="6"> </el-option>
                                    <el-option label="已取消" value="7"> </el-option>
                                    <el-option label="已作废" value="8"> </el-option>
                                    <el-option label="已完成" value="9"> </el-option>
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item label="商品类型：">
                                <el-select style="width: 200px" clearable v-model="paging.type" placeholder="请选择">
                                    <el-option label="标准毛坯" value="1"> </el-option>
                                    <el-option label="标准成品" value="2"> </el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="申请时间：">
                                <el-date-picker v-model="paging.date" type="datetimerange" format="yyyy-MM-dd HH:mm"
                                    value-format="yyyy-MM-dd HH:mm" start-placeholder="开始时间" end-placeholder="结束时间"
                                    style="width: 260px"> </el-date-picker>
                            </el-form-item>
                            <el-form-item label="" class="vs-right-btns">
                                <el-button @click="reset">重置</el-button>
                                <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="洗护用品" name="2">
                        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                            <el-form-item label="订单状态：">
                                <el-select style="width: 200px" clearable v-model="paging.status" placeholder="请选择">
                                    <el-option label="已下单" value="-1"> </el-option>
                                    <el-option label="待入库" value="1"> </el-option>
                                    <el-option label="部分入库" value="2"> </el-option>
                                    <el-option label="已入库" value="3"> </el-option>
                                    <el-option label="已取消" value="7"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="申请时间：">
                                <el-date-picker v-model="paging.date" type="datetimerange" format="yyyy-MM-dd HH:mm"
                                    value-format="yyyy-MM-dd HH:mm" start-placeholder="开始时间" end-placeholder="结束时间"
                                    style="width: 260px"> </el-date-picker>
                            </el-form-item>
                            <el-form-item label="" class="vs-right-btns">
                                <el-button @click="reset">重置</el-button>
                                <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="其他" name="3">
                        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                            <el-form-item label="订单状态：">
                                <el-select style="width: 200px" clearable v-model="paging.status" placeholder="请选择">
                                    <el-option label="已下单" value="-1"> </el-option>
                                    <el-option label="待入库" value="1"> </el-option>
                                    <el-option label="部分入库" value="2"> </el-option>
                                    <el-option label="已入库" value="3"> </el-option>
                                    <el-option label="已取消" value="7"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="申请时间：">
                                <el-date-picker v-model="paging.date" type="datetimerange" format="yyyy-MM-dd HH:mm"
                                    value-format="yyyy-MM-dd HH:mm" start-placeholder="开始时间" end-placeholder="结束时间"
                                    style="width: 260px"> </el-date-picker>
                            </el-form-item>
                            <el-form-item label="" class="vs-right-btns">
                                <el-button @click="reset">重置</el-button>
                                <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <el-button type="primary" v-if="active != 4" @click="add">新增</el-button>
                    <el-button v-if="utils.getIsShopowner()" icon="el-icon-download" type="primary"
                        style="margin-left: auto" @click="exportFn">导出</el-button>
                </div>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" key="0"
                    style="width: 100%" border v-if="active == 0">
                    <!-- <el-table-column type="selection" width="55" align="center"> </el-table-column> -->
                    <el-table-column prop="id" label="序号" align="center" :key="1"></el-table-column>
                    <el-table-column :formatter="typeFilter" label="商品类型" align="center" :key="2"></el-table-column>
                    <el-table-column label="要货类型" align="center" :key="3">
                        <template slot-scope="scope">
                            {{ scope.row.is_stock == 1 ? '顾客预约' : '门店备货' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="number" label="要货单号" align="center" :key="4" width="150">
                        <template slot-scope="scope">
                            {{ scope.row.is_stock == 1 ? scope.row.number : '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="realname" label="姓名" align="center" :key="5">
                        <template slot-scope="scope">
                            {{ scope.row.is_stock == 1 ? scope.row.realname : '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="gender" label="性别" align="center" :key="6">
                        <template slot-scope="scope">
                            {{
                                scope.row.is_stock == 1 ? (scope.row.gender && scope.row.gender == 1 ? '男' :
                                    scope.row.gender && scope.row.gender == 2 ? '女' : '-') : '-'
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号" width="110" align="center" :key="7"></el-table-column>
                    <el-table-column v-if="utils.getIsShopowner()" prop="price" label="要货金额" align="center" :key="8">
                    </el-table-column>
                    <el-table-column prop="create_time" label="申请时间" align="center" :key="9" width="150">
                        <template slot-scope="scope">
                            {{ scope.row.create_time.slice(0, 16) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="订单状态" :formatter="statusFilter" align="center" :key="10"></el-table-column>
                    <el-table-column label="操作" align="center" fixed="right" width="150" :key="11">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="text" @click="utils.goUrl('/demandInfo?id=' + scope.row.id)">详情
                                </el-button>
                                <el-button v-if="scope.row.status == 1" type="text" style="color: #929292"
                                    @click="cancel(scope.row)">取消</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" key="1"
                    style="width: 100%" border v-else>
                    <!-- <el-table-column type="selection" width="55" align="center"> </el-table-column> -->
                    <el-table-column prop="id" label="序号" align="center" :key="1"></el-table-column>
                    <el-table-column v-if="active == 1 || active == 4" :formatter="typeFilter" :key="2" label="商品类型"
                        align="center"></el-table-column>
                    <el-table-column v-if="active == 1" label="姓名" align="center" :key="12">
                        <template slot-scope="scope">
                            {{ scope.row.user ? scope.row.user.realname : '备货' }}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="active == 1 || active == 4" prop="ordinary[0].goods_number" label="商品编码"
                        min-width="100" align="center" :key="9"></el-table-column>
                    <el-table-column prop="number" label="要货单号" align="center" :key="3"></el-table-column>
                    <el-table-column prop="quantity" label="要货数量" align="center" :key="4"></el-table-column>
                    <el-table-column v-if="utils.getIsShopowner()" prop="price" label="要货金额" align="center" :key="5">
                    </el-table-column>
                    <el-table-column prop="create_time" label="申请时间" align="center" width="98" :key="6">
                    </el-table-column>
                    <el-table-column label="订单状态" :formatter="statusFilter" align="center" :key="7"></el-table-column>
                    <el-table-column label="操作" align="center" fixed="right" width="150" :key="8">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="text" @click="goDetail(scope.row.id)">详情</el-button>
                                <el-button type="text" v-if="(active == 1 || active == 4) && scope.row.status == 1"
                                    style="color: #929292" @click="cancel(scope.row)">取消</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="paging.page" :page-size="paging.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="paging.total"
                        :page-sizes="[100, 200, 500, 1000]"> </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
        <el-dialog title="申请取消订单" :visible.sync="dialogVisible" width="400px" :before-close="dialogBeforeClose">
            <div>
                <div>取消原因</div>
                <div style="margin-top: 10px">
                    <el-input type="textarea" v-model="desc" placeholder=""></el-input>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="commit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogTableVisible: false,
            loading: false,
            dialogVisible: false,
            desc: '',
            paging: {
                status: '',
                date: '',
                start_time: '',
                stop_time: '',
                type: '',
                page: 1,
                total: 0,
                limit: 100,
            },

            tableData: [],
            active: 0,
            activeRow: '',
        };
    },
    created() {
        if (this.$route.path == '/demandList') {
            if (localStorage.getItem('orderActive')) {
                this.active = localStorage.getItem('orderActive');
                localStorage.removeItem('orderActive');
            } else {
                this.active = 0;
            }
            this.handleCurrentChange(1);
        }
    },

    methods: {
        async exportFn() {
            let obj = Object.assign({}, this.paging);
            let parms = {
                status: obj.status,
                start_time: '',
                stop_time: '',
                limit: obj.limit,
                page: obj.page,
            };
            if (obj.date) {
                parms.start_time = obj.date[0] || '';
                parms.stop_time = obj.date[1] || '';
            }
            if (this.active == 0) {
                parms.two_type = obj.type;
            } else if (this.active == 1) {
                parms.two_type = 1;
            } else if (this.active == 4) {
                parms.two_type = 2;
            } else if (this.active == 2) {
                parms.take_ticket_type = 3;
            } else {
                parms.take_ticket_type = 4;
            }
            delete parms.page;
            delete parms.limit;
            let arr = ['store/takeTicket/TakeTicketSpecialExport', 'store/takeTicket/TakeTicketOrdinaryExport', 'store/takeTicket/TakeTicketOtherExport', 'store/takeTicket/TakeTicketOtherExport', 'store/takeTicket/TakeTicketOrdinaryExport'];
            let tips = ['特殊商品要货单', '标准毛坯要货单', '洗护用品要货单', '其他要货单', '标准成品要货单'];
            console.log(this.utils.data, 'this.utils.data.baseURL');
            let url = this.utils.data.baseURL + arr[this.active];
            this.utils.urlToBlob(url, tips[this.active], parms);
        },

        add() {
            if (this.active == 0) {
                this.utils.goUrl('/demandAdd');
            } else if (this.active == 1) {
                this.utils.goUrl('/demandAddTwo');
                localStorage.setItem('orderActive', 1);
            } else if (this.active == 2) {
                this.utils.goUrl('/demandAddThree?type=3');
                localStorage.setItem('orderActive', 2);
            } else if (this.active == 3) {
                this.utils.goUrl('/demandAddThree?type=4');
                localStorage.setItem('orderActive', 3);
            } else if (this.active == 4) {
                this.utils.goUrl('/demandAddTwo');
                localStorage.setItem('orderActive', 4);
            }
        },
        // 订单确认取消
        async commit() {
            if (!this.desc && this.active == 0) {
                return this.$message.warning('请输入取消原因');
            }
            if (this.active == 0) {
                let { code } = await this.$Http.specialCancel({
                    id: this.activeRow.id,
                    content: this.desc,
                });
                if (code) {
                    this.dialogVisible = false;
                    this.$message.success('取消成功！');
                    this.repairGetList();
                }
            } else if (this.active == 1) {
                this.$confirm('是否确定取消该要货单', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(async () => {
                        let { code } = await this.$Http.ordinaryVoid({
                            take_ticket_id: this.activeRow.id,
                        });
                        if (code) {
                            this.dialogVisible = false;
                            this.$message.success('取消成功！');
                            this.repairGetList();
                        }
                    })
                    .catch(() => { });
            }
        },
        cancel(row) {
            this.activeRow = row;
            if (this.active == 0) {
                console.log(11);
                this.dialogVisible = true;
            } else if (this.active == 1) {
                this.commit();
            }
        },
        goDetail(id) {
            localStorage.setItem('orderActive', this.active);
            console.log("this.active普通商品", this.active);
            if (this.active == 1 || this.active == 4) {
                this.utils.goUrl('/demandInfoTwo?id=' + id);
            } else {
                let type = 3;
                if (this.active == 3) {
                    type = 4;
                }
                this.utils.goUrl('/demandInfoThree?id=' + id + '&type=' + type);
            }
        },
        typeFilter(row) {
            let arr1 = ['', '定制毛坯', '定制成品'];
            let arr2 = ['', '标准毛坯', '标准成品'];
            if (this.active == 0) {
                return arr1[row.two_type];
            } else if (this.active == 1 || this.active == 2 || this.active == 4) {
                return arr2[row.two_type];
            }
        },
        statusFilter(row) {
            let arr = ['已下单', '待入库', '部分入库', '已入库', '', '售后中', '取消审核', '已取消', '已作废', '已完成'];
            return arr[row.status];
        },
        dialogBeforeClose() {
            console.log(1);
        },
        handleClick(tab, event) {
            this.reset();
        },
        openInfo() {
            this.$prompt('请输入核验码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^\d+$/,
                inputErrorMessage: '核验码格式不正确',
                beforeClose: async (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        let { code, data } = await this.$Http.checkOrder({ check_code: instance.inputValue });
                        if (code) {
                            this.$message.success('提交成功!');
                            this.handleCurrentChange(1);
                        }
                        done();
                        instance.confirmButtonLoading = false;
                    } else {
                        done();
                    }
                },
            })
                .then(({ value }) => { })
                .catch(() => { });
        },
        async setRow(type, row) {
            this.dialogTableVisible = true;
        },
        async setRow1(type, row) {
            if (type == 1) {
                this.dialogTableVisible = true;
                this.dialogTableVisible = true;
                // this.utils.goUrl('/orderInfo?title=订单详情&type=2&id=' + row.id)
            } else if (type == 2) {
                this.$prompt('原因：', '是否确认取消订单？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputType: 'textarea',
                })
                    .then(({ value }) => {
                        this.$message({
                            type: 'success',
                            message: '你的邮箱是: ' + value,
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入',
                        });
                    });
            }
        },
        handleClose(dom) {
            this.$refs['ruleForm'].resetFields();
            this.dialogVisible = false;
            dom && dom();
        },
        // 获取列表
        async repairGetList() {
            let obj = Object.assign({}, this.paging);
            let status;
            if (obj.status == -1) {
                status = '0';
            } else if (!obj.status) {
                status = '-1';
            } else {
                status = obj.status;
            }
            let parms = {
                status,
                start_time: '',
                stop_time: '',
                limit: obj.limit,
                page: obj.page,
            };
            if (obj.date) {
                parms.start_time = obj.date[0] || '';
                parms.stop_time = obj.date[1] || '';
            }
            if (this.active == 0) {
                parms.two_type = obj.type;
            } else if (this.active == 1) {//标准毛坯
                parms.two_type = 1;
            } else if (this.active == 4) {//标准成品
                parms.two_type = 2;
            } else if (this.active == 2) {
                parms.take_ticket_type = 3;
            } else {
                parms.take_ticket_type = 4;
            }
            let arr = ['specialLists', 'ordinary', 'other', 'other', 'ordinary'];
            this.loading = true;
            let { code, data } = await this.$Http[arr[this.active]](parms);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset() {
            //重置
            this.paging = this.$options.data().paging;
            this.handleCurrentChange(1);
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList();
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList();
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep {
    .el-dialog__header {
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
    }
}

.image-thumbnail {
    width: 130px;
    height: 130px;
}

.divTable {
    width: 100%;

    div {
        border-bottom: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        height: 50px;
        line-height: 50px;
        padding-left: 30px;
    }
}
</style>
